
<!--
 * @Author: @miao-xiongmei 2575733397@qq.com
 * @Date: 2022-07-15 10:12:46
 * @LastEditors: @miao-xiongmei 2575733397@qq.com
 * @LastEditTime: 2022-07-26 11:48:57
 * @FilePath: \tainfuhealh\src\components\bookingManagement\search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-upload ref="upload" class="upload-demo" action="#" accept=".xlsx, .xls" :auto-upload="false"
            :on-change="uploadFile" :show-file-list="false">
            <el-button type="warning">选择文件</el-button>
        </el-upload>
        <el-button type="warning" @click="downloadFile()" class="download">下载文件</el-button>
        <el-button type="warning" @click="addAppointmentForm()">新增预约</el-button>
        <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{data}">
                <!-- <p>已预约{{n}}</p> -->
                <div @click="showDate(data)">
                    <p style="font-size:10px;text-align:right;margin:5px 0 0 0;">
                        {{ data.day.split('-').slice(2).join('-') }}
                    </p>
                    <div v-if="data.isSelected && isData">
                        <p class="appointmentContent">可预约<span>{{ calendarData[0].remainder }}人</span></p>
                        <p class="appointmentContent">已预约<span>{{ calendarData[0].count }}人</span></p>
                    </div>
                </div>

                <el-dialog title="添加预约" :visible.sync="addAppointmentFormVisible">
                    <el-form>
                        <el-form-item label="可预约人数" prop="remainder">
                            <el-input v-model="addAppointmentFrom.remainder" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="预约日期" prop="created">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"
                                v-model="addAppointmentFrom.created" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addAppointmentFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addAppointment()">确 定</el-button>
                    </div>
                </el-dialog>

            </template>
        </el-calendar>
    </div>
</template>

<script>
import paging from '../../components/book/paging.vue'
export default {
    data() {
        return {
            value: new Date(),
            addAppointmentFormVisible: false,
            // remainder: 0,
            // count: 0,
            calendarData: [{
                created: '',
                remainder: 0,
                count: 0,
            }],
            temp: {
                created: '',
                remainder: 0,
                count: 0,
            },
            addAppointmentFrom: {
                remainder: 0,
                created: '',
            },
            isData: true,
        }
    },
    components: {
        paging,
    },
    methods: {

        // 文件上传
        uploadFile(item) {
            let formData = new FormData()
            let file = item.raw
            formData.append('file', file)
            this.$axios({
                url: '/appointmentset/import', //后端提供的接口
                method: 'post',
                data: { 'file': formData.get('file') },
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                if (res.code === 0) {
                    // console.log(res.data)
                } else {
                    // console.log(formData.get('file'))
                    // console.log(item.file)
                    // console.log(formData)
                }

            })
        },
        // 下载文件
        downloadFile() {
            this.$axios({
                url: '/appointmentset/export', //后端提供的接口
                method: 'get',
                responseType: 'blob',
                // data: params,
            })
                .then(result => {
                    const blob = new Blob([result], {
                        type: 'application/octet-stream'
                    })
                    const downloadElement = document.createElement('a')
                    // 创建下载的链接
                    const href = window.URL.createObjectURL(blob)
                    downloadElement.href = href
                    // 下载后文件名
                    var name = '预约人数模板.xlsx'
                    downloadElement.setAttribute("download", name); // 设置文件 name
                    // downloadElement.download = '预约人数模板.xlsx'
                    // document.body.appendChild(downloadElement)
                    // console.log(downloadElement)
                    // 点击下载
                    downloadElement.click()
                    // 下载完成移除元素
                    document.body.removeChild(downloadElement)
                    // 释放掉blob对象
                    window.URL.revokeObjectURL(href)

                })
        },
        // 添加预约
        addAppointmentForm() {
            this.addAppointmentFormVisible = true;
            this.addAppointmentFrom = {}
        },
        addAppointment() {
            this.$axios({
                method: 'post',
                url: '/appointmentset/insert',
                data: { 'created': this.addAppointmentFrom.created },
            })
                .then(res => {
                    if (res.code === 0) {
                        this.calendarData[0].created = this.addAppointmentFrom.created;
                        this.calendarData[0].remainder = this.addAppointmentFrom.remainder;
                        this.calendarData[0].count = 0;
                        this.addAppointmentFormVisible = false;
                    } else {
                        // console.log(res)
                    }
                })
        },
        // 可预约人数
        ReservationsAvailable() {
            this.isData = false;
            this.$axios({
                method: 'post',
                url: '/appointmentset/selectmembercount',
                data: { 'created': this.calendarData[0].created },
            })
                .then(res => {
                    if (res.code === 0) {
                        // this.calendarData[0].date = data.day
                        if (res.data == null) {
                            alert('没有数据')
                        } else {
                            this.calendarData[0].remainder = res.data.memberCount - this.calendarData[0].count;
                            this.isData = true;
                            // console.log(this.calendarData)
                            // console.log(res.data.memberCount)
                            // console.log(this.calendarData[0].created)
                        }
                        // console.log(this.calendarData.created)
                        // console.log(this.value)
                    } else {
                        // console.log(res)
                        // console.log(this.calendarData[0].created)
                    }
                })
        },
        // 已预约人数
        ReservationMade() {
            this.$axios({
                method: 'post',
                url: '/appointmentset/selectmember',
                data: {},
            })
                .then(res => {
                    if (res.code === 0) {
                        this.calendarData[0].count = res.data;
                        this.ReservationsAvailable();
                        // console.log(this.calendarData[0].count)
                    } else {

                    }
                })
        },
        showDate(data) {
            this.calendarData = [{
                created: '',
                remainder: 0,
                count: 0,
            }]
            this.calendarData[0].created = data.day;
            // console.log(this.calendarData);
            this.ReservationMade();
            // console.log(data.isSelected);
        }
    },
    created() {

    }
}
</script>

<style scoped>
.appointmentContent {
    margin: 5px 0;
    text-align: center;
    font-size: 13px;
}

.upload-demo {
    float: left;
    margin-right: 10px;
}
</style>